import * as echarts from 'echarts';

export const colors = [
  {
    start: '#00d8ff',
    end: '#aaebf7',
  },
  {
    start: '#ffa200',
    end: '#f3ddb7',
  },
  {
    start: '#F9A3A3',
    end: '#FE5959',
  },
  {
    start: '#10B4CE',
    end: '#6BDBEC',
  },
  {
    start: '#5B64E8',
    end: '#AFB4FB',
  }
]

export const itemStyles = colors.map(item => {
  return {
    "type": "linear",
    "x": 0,
    "y": 0,
    "x2": 0,
    "y2": 1,
    "colorStops": [
      {
        "offset": 0,
        "color": item.start
      },
      {
        "offset": 1,
        "color": item.end
      }
    ],
    "global": false
  }
})

const circleOptions = (data: any[], size = "30%", cn: string) => {
  return {
    tooltip: {
      trigger: 'item',
      renderMode: 'html',
      // show: false,
      // formatter: "<div style='color: #000000;font-style: normal;font-weight: 500;font-size: 13PX;line-height: 18PX;'>{b0}</div><div style='color: #0a9391;margin-top:10PX;'>Score +{c0}%</div>",
      borderColor: '#fff',
      padding: 12,
      extraCssText: 'box-shadow: 0PX 2PX 4PX rgba(0, 0, 0, 0.25);',
    },
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 5
    },
    legend: {
      bottom: 0,
      textStyle: {
        color: '#ffffff', // 修改图例文字颜色
        fontSize: '16px'
      },
      data: data.map((item: { name: any; }) => {
        return { name: item.name, icon: 'circle' }
      }),
      // formatter: function (params) {
      //   console.log(params, 'params')
      //   // return name + `  50%  2500万元`
      // },
      formatter: function (name: any) {
        // 获取数据
        var currentData;
        for (var i = 0, l = data.length; i < l; i++) {
          currentData = data[i];
          if (currentData.name === name) {
            // 计算当前数据项的百分比
            var percent = ((currentData.value / currentData.total) * 100).toFixed(2) + '%';
            return `${name} ${data[i].value}万元 (${percent})`;
          }
        }
        return name;
      },
      selectedMode: false,
    },
    title: [
      {
        // text: `{a|Your Score}\n{b|${userScore}}{c|%}`,
        top: 'center',
        left: 'center',
        textStyle: {
          fontStyle: 'normal',
          fontWeight: 500,
          rich: {
            a: {
              color: '#47bfaf',
              padding: [0, 0, 10, 0],
              fontSize: 13,
            },
            b: {
              color: '#47bfaf',
              fontSize: 40,
            },
            c: {
              color: '#47bfaf',
              fontSize: 18,
            },
          },
        },
      },
    ],
    series: [
      {
        type: 'pie',
        radius: ['0', '20%'],
        center: ['50%', '35%'],
        avoidLabelOverlap: false,

        minAngle: 5,
        hoverAnimation: false,
        emphasis: {
          scale: false,
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        data: [{ value: 100 }],
        "itemStyle": {
          "color": function (_params: any) {
            // 构造渐变色
            var colorList = [
              { offset: 0, color: 'rgba(255, 255,255, 0)' },
              { offset: 0.9, color: 'rgba(17, 235, 215, 0.5)' },
              { offset: 1, color: 'rgba(17, 235, 215, 1)' }
            ];
            return new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, colorList);
          }
        }
      },
      {
        type: 'pie',
        radius: ['25%', '60%'],
        center: ['50%', '35%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        selected: false,
        hoverAnimation: false,
        emphasis: {
          scale: false,
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        data: [{ label: '', value: 100 }],
        "itemStyle": {
          "color": function (_params: any) {
            // 构造渐变色
            var colorList = [
              { offset: 0, color: '#fff' },
              { offset: 1, color: 'rgba(17, 235, 215, 0)' }
            ];
            return new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, colorList);
          }
        }
      },
      {
        type: 'pie',
        radius: [size, '55%'],
        center: ['50%', '35%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        minAngle: 5,
        tooltip: {
          valueFormatter: function (value: string, _dataIndex: number) {
            return value + '万元';
          },
        },
        label: {
          color: '#fff', // 字体颜色
          borderWidth: 0,
          normal: {
            formatter: `{b}\n{d}%`,
            borderWidth: 0,
            fontSize: '15',
            color: '#fff', // 字体颜色
          },
        },

        data: data.map((item: any, index: string | number) => {
          return {
            ...item,
            itemStyle: {
              color: itemStyles[index],
              // borderColor: '#fff',
              // borderWidth:5
            }
          }
        }),
      },
    ],
  };
};


const makeOptions = (data: { value: number; }, c: any, cn: string) => {
  let color = ['#EAF1FF', `${c}`];//圆环两色
  let da = [
    {
      value: 100 - data.value
    },
    {
      value: data.value
    }
  ];

  let formatNumber = function (num: { value?: any; toString?: any; }) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
  }
  let total = da.reduce((_a, b) => {
    return b.value + '%'
  }, 0);
  return {

    color: color,
    title: [{
      text: '{val|' + formatNumber(total) + '}',
      top: 'center',
      left: 'center',
      textStyle: {
        rich: {
          val: {
            fontSize: 16,
            fontWeight: 'bold',
            color: c,// 圆环中心文字字体颜色
          }
        }
      }
    }],
    series: [
      {
        type: 'pie',
        radius: ['0', '55%'],
        avoidLabelOverlap: false,

        // padAngle: 5,
        label: {
          show: false,
          position: 'center',
        },
        hoverAnimation: false,
        emphasis: {
          scale: false,
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        data: [{ value: 100 }],
        "itemStyle": {
          "color": function (_params: any) {
            // 构造渐变色
            var colorList = [
              { offset: 0, color: "rgba(255, 255, 255, 0)" },  // 100% 处的颜色
              { offset: 1, color: `rgba(${cn})` },  // 100% 处的颜色
            ];
            return new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, colorList);
          }
        }
      }, {
        type: 'pie',
        radius: ['60%', '90%'], //控制圆环大小
        center: ['50%', '50%'], //控制圆环位置
        hoverAnimation: false,
        data: da,
        itemStyle: {
          normal: {
            borderWidth: 2
          },
        },
        labelLine: {
          normal: {
            length: 0,
            length2: 0,
            lineStyle: {
              color: c
            }
          }
        }
      }]
  };
}

export { circleOptions, makeOptions };
